<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html, #allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}
</style>
<title>异步加载地图</title>
</head>
<body>
	<div>
		<div id="allmap"></div>
	</div>
</body>
<script type="text/javascript">
//<![CDATA[
  var search = window.location.search;
  var params = { zoom: 15, marker: 1, content: '' };
  for (var i in search.slice(1).split("&")) {
    var item = search.slice(1).split("&")[i]
    var param = item.split("=")
    switch (param[0]) {
      case "ak":
        params.ak = param[1];
        break;
      case "address":
        params.address = decodeURI(param[1]);
        break;
      case "zoom":
        params.zoom = parseInt(param[1]);
        break;
      case "marker":
        params.marker = parseInt(param[1]);
        break;
      case "long":
        params.long = param[1];
        break;
      case "lat":
        params.lat = param[1];
        break;
      case "content":
        params.content = decodeURI(param[1]);
        break;
      case "posType":
        params.posType = parseInt(param[1]);
        break;
      case "width":
        params.width = decodeURI(param[1]);
        break;
      case "height":
        params.height = decodeURI(param[1]);
        break;
      default:
        break;
    }
  }
  if (params.posType && params.ak && (params.address || (params.long && params.lat))) {
    document.getElementById('allmap').style.width = "100%";
    document.getElementById('allmap').style.height = params.height;
    //百度地图API功能
    function loadJScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://api.map.baidu.com/api?v=2.0&ak=" + params.ak + "&callback=init";
      document.body.appendChild(script);
    }
  }
  function init() {
    var map = new BMap.Map("allmap", { minZoom: 1, maxZoom: 18 }); // 创建Map实例
    var address = params.address;
    var zoom = params.zoom;
    var ismarker = params.marker;
    var map_x = parseFloat(params.long);
    var map_y = parseFloat(params.lat);
    var point = new BMap.Point(map_x, map_y);
    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    var opts = {
      width: 200 // 信息窗口宽度
    }
    var content = params.content;
    if (params.posType === 2) {
      map.centerAndZoom(point, zoom);
      if (ismarker == 1) {
        marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker);             // 将标注添加到地图中
        marker.enableDragging();
      }

      if (content != "") {
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      }
    } else {
      // 将地址解析结果显示在地图上,并调整地图视野
      myGeo.getPoint(params.address, function (point) {
        if (point) {
          map.centerAndZoom(point, zoom);
          if (ismarker == 1) {
            marker = new BMap.Marker(point); // 创建标注
            map.addOverlay(marker);             // 将标注添加到地图中
            marker.enableDragging();
          }
          if (content != "") {
            var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
          }
        }
      }, "北京朝阳区");
    }
    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
      // 靠左上角位置
      anchor: BMAP_ANCHOR_TOP_LEFT,
      // LARGE类型
      type: BMAP_NAVIGATION_CONTROL_LARGE,
      // 启用显示定位
      enableGeolocation: true
    });
    map.addControl(navigationControl);
  }
  window.onload = loadJScript;  //异步加载地图
//]]>
</script>
</html>